<template>
	<view class="content">
		<searchbar clearButton="auto" confirm="onSearch"></searchbar>
		
		<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<block v-for="item in banners" :key="item.id">
				<swiper-item>
					<image mode="aspectFill" class="banner_image" :src="item.img" />
				</swiper-item>
			</block>
		</swiper>

		<view class="btn-area">
			<block v-for="item in tools" :key="item.id">
				<navigator :url="item.target">
					<button type="default" size="mini">
						<image :src="item.imgUrl"></image>
						<view>{{item.title}}</view>
					</button>
				</navigator>
			</block>
		</view>
<list>
		<showlist title="热门课程" more="near" :list='hotList'>

		</showlist>
</list>
<list>
		<showlist title="最新发布" more="near" :list='hotList'>

		</showlist>
</list>
		<view class="footer">
			<!-- <view class="contact">联系方式</view> -->

		</view>

	</view>
</template>

<script>
	import showlist from '../../components/course-video/show-list.vue'
	import searchbar from '../../components/uni-search-bar/uni-search-bar.vue'
	
	export default {
		components:{
			showlist
		},
		data() {
			return {
				hotList:[{id:'231',title:'123',desc:'2435',content:'dfasdfadsfasdf454fasdf454',imgUrl:'/static/image/home/lifestyle-1.jpg'},
					{id:'231',title:'123',desc:'2435',content:'dfasdfadsfasdf454fasdf454',imgUrl: '/static/image/home/backGround.jpg'}
				],
				tools: [{
						id: 1,
						title: '全部课程',
						target: '../course/list',
						imgUrl: ''
					},
					{
						id: 2,
						title: '课程分类',
						target: '../course/category',
						imgUrl: '/static/image/icon/category.svg'
					},
					{
						id: 3,
						title: '找家教',
						imgUrl: '/static/image/icon/查找.svg'
					},
					{
						id: 4,
						title: '家教打卡',
						target: './clock',
						imgUrl: '/static/image/icon/map.svg'
					}
				],
				banners: [{
						id: 1,
						img: '/static/image/home/lifestyle-1.jpg'
					},
					{
						id: 2,
						img: '/static/image/home/lifestyle-2.jpg'
					},
					{
						id: 3,
						img: '/static/image/home/lifestyle-3.jpg'
					},
					{
						id: 4,
						img: '/static/image/home/city-1.jpg'
					},
					{
						id: 5,
						img: '/static/image/home/backGround.jpg'
					}
				],

			}
		},
		methods: {

		}
	}
</script>

<style>
#wrap {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.banner .banner_image {
	width: 100%;
	height: 200%;
}
.btn-area{
  margin-top: 50rpx;
  text-align: center;
}
.btn-area navigator{
  width: 150rpx;
  display: inline-block;
  margin: 10rpx;
}
.btn-area image{
    height:100rpx; 
    width:100rpx
}
.btn-area button{
  padding: 0;
  background-color:#fff;
  display: block;
  size: mini;
}

.list-head{
  padding-top: 20rpx;
  position: relative;
  text-align: center;
  font-size: 50rpx;
}
.list-head button{
  display: inline;
  position: absolute;
  right: 30rpx;
  bottom: 0;
}

</style>
